<template>
  <div>
    <!-- 顶部蓝色 -->
    <div class="top">
      <van-image class="top-img" round fit="cover" :src="info.profile_photo" />
      <!-- 顶部右侧 -->
      <div class="top-right">
        <div class="name">{{ info.user_name }}</div>
        <!-- <span class="birth">{{ info.birthday }}</span> -->
        <span class="birth">{{ info.create_date }}</span>
      </div>
    </div>
    <div class="mid">
      <!-- 中间三个图标 -->
      <van-row>
        <van-col span="8">
          <van-icon name="newspaper-o" class="works" />
          <div>我的作品</div>
        </van-col>
        <van-col span="8">
          <van-icon name="star-o" class="collection" />
          <div>我的收藏</div>
        </van-col>
        <van-col span="8">
          <van-icon name="tosend" class="history" />
          <div>阅读历史</div>
        </van-col>
      </van-row>
    </div>
    <div class="bottom">
      <!-- cell -->
      <van-cell-group inset>
        <van-cell title="编辑资料" to="/mine/edit" is-link icon="edit" />
        <van-cell title="小智同学" to="/mine/chat" is-link icon="chat-o" />
        <van-cell title="系统设置" is-link icon="setting-o" />
        <van-cell title="退出登陆" @click="logout" is-link icon="info-o" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { userInfoAPI } from '@/api'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({ info: 'userInfo' })
  },
  async created () {
    const res = await userInfoAPI()
    this.info = res.data.data
    console.log("加载用户信息", res)
    this.$store.commit('changeUserInfo', res.data.data)
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    logout () {
      this.$store.commit('logout')
      this.$toast.success('退出成功')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  height: 140px;
  background-color: #3296fa;
  display: flex;
  align-items: center;
  .top-img {
    width: 85px;
    height: 85px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .name {
    font-weight: bolder;
    color: #fff;
  }
  .birth {
    font-size: 16px;
    margin-top: 10px;
    background-color: #fff;
    color: #3296fa;
    text-align: center;
  }
}
.mid {
  .van-row {
    .van-col {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      div {
        font-size: 14px;
      }
      .van-icon {
        font-size: 36px;
        margin-bottom: 5px;
        &.works {
          color: skyblue;
        }
        &.collection {
          color: red;
        }
        &.history {
          color: orange;
        }
      }
    }
  }
}
</style>
